<template>
  <div class="layoutCon">
    <div class="totals">
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='newCount' :duration='3000' separator=','></countTo>
        <label>신규 인재정보</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='count' :duration='3000' separator=','></countTo>
        <label>누적 인재정보</label>
      </div>
    </div>
    <search-box type="recruitIndex"></search-box>
    <div class="jobList">
      <h2>주요인재</h2>
      <div class="loadList" v-loading="loading">
        <ul>
          <li v-for="(item,index) in main_list" :key="index">
            <div class="pic">
              <img :src="item.user&&item.user.uthumb?item.user&&item.user.uthumb:defaultAvatar" class="avatar" :onerror="errorAvatar2">
            </div>
            <div class="info">
              <strong @click="showInfo(item.id,index,1)">{{item.application_scope}}</strong>
              <p class="t"><b>{{item.user&&formatName(item.user.name)}}</b> <span>({{item.user&&item.user.sex==1?'남':'여'}}, {{item.user&&item.user.age}})</span>
                <template v-if="item.job_age_year">
                    | 경력 {{item.job_age_year}}년 {{item.job_age_month}}개월
                </template>
              </p>
              <p v-html="item.jobs&&getJobs(item.jobs)"></p>
              <p class="v" v-html="item.areas&&getAdds(item.areas)"></p>
              <p class="v">
                <template v-if="item.highest_education&&item.highest_education.level">
                  {{item.highest_education.level.value}}
                </template>
              </p>
            </div>
            <div class="bom">
              <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index,1)">자세히보기</a>
                <el-popconfirm
                  v-if="item.collect"
                  title="찜한공고에서 제거하시겠습니까?"
                  confirmButtonText='확인'
                  cancelButtonText='취소'
                  iconColor="red"
                  @onConfirm="collect(item,index,1) "
                >
                  <a slot="reference" target="_self" href="javascript:;" class="btn ico_favo collect">찜하기</a>
                </el-popconfirm>
                <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index,1)">찜하기</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="jobList">
      <h2>최근인재</h2>
      <div class="loadList" v-loading="loading">
        <ul>
        <li v-for="(item,index) in new_list" :key="index">
            <div class="pic">
              <img :src="item.user&&item.user.uthumb?item.user.uthumb:defaultAvatar" class="avatar" :onerror="errorAvatar2">
            </div>
            <div class="info">
              <strong @click="showInfo(item.id,index,2)">{{item.application_scope}}</strong>
              <p class="t"><b>{{item.user&&formatName(item.user.name)}}</b> <span>({{item.user&&item.user.sex==1?'남':'여'}}, {{item.user&&item.user.age}})</span>
                <template v-if="item.job_age_year">
                    | 경력 {{item.job_age_year}}년 {{item.job_age_month}}개월
                </template>
              </p>
              <p v-html="item.jobs&&getJobs(item.jobs)"></p>
              <p class="v" v-html="item.areas&&getAdds(item.areas)"></p>
              <p class="v">
                <template v-if="item.highest_education&&item.highest_education.level">
                  {{item.highest_education.level.value}}
                </template>
              </p>
            </div>
            <div class="bom">
              <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index,2)">자세히보기</a>
              <el-popconfirm
                v-if="item.collect"
                title="찜한공고에서 제거하시겠습니까?"
                confirmButtonText='확인'
                cancelButtonText='취소'
                iconColor="red"
                @onConfirm="collect(item,index,2) "
              >
                <a slot="reference" target="_self" href="javascript:;" class="btn ico_favo collect">찜하기</a>
              </el-popconfirm>
              <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index,2)">찜하기</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <recruit-card :cardParams="cardData" :allJobs="allJobs" @changeCollect="changeCollect"></recruit-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getCVIndex, myCvCollect } from '@/api'
import countTo from 'vue-count-to'
import searchBox from '@/components/searchBox'
import recruitCard from '@/components/recruitCard'

export default {
  name:'',
  components:{countTo,searchBox,recruitCard},
  props:[],
  data(){
    return {
      loading:true,
      newCount:0,
      count:0,
      main_list:[],
      new_list:[],
      allJobs:[],
      cardData:null,
      curIndex:null,
      curType:null,
    }
  },
  computed:{
    ...mapState(['errorAvatar2','defaultAvatar']),
  },
  created(){
    this.getCVList();
  },
  mounted(){},
  methods:{
    async getCVList(){
      let res = await getCVIndex();
      if(res.code==200){
        this.newCount=res.data.newCount;
        this.count=res.data.count;
        this.main_list=this.randomList(res.data.main_list);
        this.new_list=res.data.new_list;
        this.loading=false;
      }else{
        this.$alert(res.message, '알림', {
          confirmButtonText: '확인',
          callback: action => {
            this.$router.push('/')
          }
        })
      }
    },
    randomList: function(rand){
      return rand.sort(function(){return 0.5 - Math.random()});
    },
    getJobs(jobs){
      let _txt = "";
      jobs.length &&
        jobs.forEach((o, i) => {
          o.job1&&(_txt +=
            (i != 0 ? " , " : "") +
            o.job1.name +
            (o.job2 ? ">" + o.job2.name : "") +
            (o.job3 ? ">" + o.job3.name : ""));
        });
      return _txt;
    },
    getAdds(aras){
      let _txt = "";
      aras.length &&
        aras.forEach((o, i) => {
          o.area1&&(_txt +=
            (i != 0 ? " , " : "") +
            o.area1.name +
            (o.area2 ? ">" + o.area2.name : "") +
            (o.area3 ? ">" + o.area3.name : ""));
        });
      return _txt;
    },
    showInfo(id,index,type){
      this.curIndex=index;
      this.curType=type;
      this.cardData={
        isShow:true,
        id:id
      }
    },
    changeCollect(status){
      if(this.curType==1){
        this.main_list[this.curIndex].collect=status;
      }else{
        this.new_list[this.curIndex].collect=status;
      }
    },
    async collect(obj,index,type){
      let _status=1;
          obj.collect&&(_status=0)
      let res = await myCvCollect({cv_id:obj.id,status:_status});
      try {
          if(res.code==200){
          if(type==1){
            this.main_list[index].collect=_status;
          }else{
            this.new_list[index].collect=_status;
          }
        }
      } catch (error) {}
    },
    formatName(name){
      return name.substr(0,1)+'**';
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/job.scss";
</style>
